<template>
  <div style="display: inline-block">
    <v-snackbar :timeout="3000" v-model="snackbar" top multi-line>
      {{ $t('navbar.noFullscreen') }}
      <v-btn flat color="pink" @click.native="snackbar = false">{{$t('navbar.close')}}</v-btn>
    </v-snackbar>

    <v-btn icon @click="click">
      <v-icon>fullscreen</v-icon>
    </v-btn>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'VFullscreen',
  data: () => ({
    snackbar: false,
    isFullscreen: false
  }),
  methods: {
    click() {
      if (!screenfull.enabled) {
        this.snackbar = true
        return false
      }
      screenfull.toggle()
    }
  }
}
</script>
